<template>
  <div class="scheduleTemp wrap-table">
    <el-tabs v-model="activeName">
      <el-tab-pane label="孕前期" name="1">
        <yq-temp v-if="activeName=='1'" :userState="'1'"></yq-temp>
      </el-tab-pane>
      <el-tab-pane label="怀孕期" name="2">
        <yq-temp v-if="activeName=='2'" :userState="'2'"></yq-temp>
      </el-tab-pane>
      <el-tab-pane label="儿童期（CH1）" name="3">
        <yq-temp v-if="activeName=='3'" :userState="'3'"></yq-temp>
      </el-tab-pane>
      <el-tab-pane label="儿童期（CH2）" name="4">
        <yq-temp v-if="activeName=='4'" :userState="'4'"></yq-temp>
      </el-tab-pane>
      <el-tab-pane label="基本事项管理" name="basic">
        <!-- 查询区域 -->
        <el-form ref="form" :model="searchData" label-width="120px" class="clearfix">
          <el-form-item label="事项类型"  class="pull-left" style="margin-left: -46px">
              <el-select v-model="searchData.type" placeholder="请选择"  >
                <el-option label="全部" value=""></el-option>
                <el-option label="健康访谈" value="1"></el-option>
                <el-option label="营养门诊" value="2"></el-option>
                <el-option label="健康教育" value="3"></el-option>
                <el-option label="母乳喂养随访" value="5"></el-option>
                <el-option label="数据采集" value="6"></el-option>
                <el-option label="肥胖门诊" value="7"></el-option>
                <el-option label="其它事项" value="4"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="基本事项标题" class="pull-left">
            <el-input v-model="searchData.keyWord" placeholder="请输入基本事项标题">
            </el-input>
          </el-form-item>
          <!-- 操作区域 -->
          <div class="pull-right">
            <el-button  @click="queryHandler" class=" mg-lr-20 pd-bt">查询</el-button>
            <el-button type="primary" @click="addHandler" class="pull-right pd-bt">添加</el-button>
          </div>
        </el-form>

        <!---->
        <template>
          <el-table  :data="tableData" border empty-text="当前列表为空" v-loading="loading" element-loading-text="加载中" style="width: 100%">
            <el-table-column align="center" label="序号" width="70">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="" prop="Title" label="基本事项标题" min-width="300">
            </el-table-column>

            <el-table-column align="center" :formatter="Fllowformater" prop="NeedFollowUp" label="事项类型" min-width="80">
            </el-table-column>

            <el-table-column align="center" :formatter="FollowUpTypeFormater" prop="FollowUpType" label="访谈类型" min-width="80">
            </el-table-column>

            <el-table-column align="center" :formatter="TFformater" prop="NeedQuestionnaire" label="填写问卷" min-width="80">
            </el-table-column>

            <el-table-column align="center" prop="IsFontWeight" :formatter="TFformater" label="字体加粗" min-width="80">
            </el-table-column>

            <el-table-column prop="Color" align="center" label="颜色标签" min-width="80">
              <!-- {{scope.row.Color}} -->
              <div slot-scope="scope" v-if="scope.row.Color" class="color-span" :style="{backgroundColor:scope.row.Color}"></div>
            </el-table-column>

            <el-table-column align="center" prop="Description" label="具体描述" min-width="200">
            </el-table-column>
            <el-table-column align="center" prop="IsTemplate" :formatter="IsTemplateformater" label="模板事项" min-width="80">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="editHandler(scope.$index, scope.row)">修改</el-button>
                <!--<el-button size="small" type="text" @click="deleteHandler(scope.$index, scope.row)">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!--分页-->
        <div class="block mg-20-auto">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageCount" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>

        <!-- 编辑查看对话框 -->
        <el-dialog :title="dialogTitle"  :append-to-body="true" top="0" :close-on-click-modal="false"
                   :visible.sync="centerDialogVisible" width="60%">

          <el-form :model="form" :rules="formRules" ref="healthyForm">
            <el-form-item label="事项标题"  :label-width="formLabelWidth" prop="Title">
              <el-input v-model="form.Title" auto-complete="off"  :disabled="dialogTitle =='修改基本事项'"></el-input>
            </el-form-item>

            <el-form-item label="事项类型" :label-width="formLabelWidth" prop="NeedFollowUp">
              <el-select v-model="form.NeedFollowUp" placeholder="请选择"  :disabled="dialogTitle =='修改基本事项'" @change="changeNeed">
                <el-option label="健康访谈" value="1"></el-option>
                <el-option label="营养门诊" value="2"></el-option>
                <el-option label="健康教育" value="3"></el-option>
                <el-option label="母乳喂养随访" value="5"></el-option>
                <el-option label="数据采集" value="6"></el-option>
                <el-option label="肥胖门诊" value="7"></el-option>
                <el-option label="其它事项" value="4"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="访谈类型" :label-width="formLabelWidth" prop="FollowUpType" v-if="form.NeedFollowUp=='1'
             || form.NeedFollowUp=='5' || form.NeedFollowUp=='6'">
              <el-select :disabled="form.NeedFollowUp!='1' && form.NeedFollowUp!='5' && form.NeedFollowUp!='6' ||
              dialogTitle =='修改基本事项'"
                         v-model="form.FollowUpType"
                         placeholder="请选择">
                <el-option label="面对面" value="1"></el-option>
                <el-option label="电话" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="访谈类型" :label-width="formLabelWidth" v-else>
              <el-select :disabled="form.NeedFollowUp!='1' && form.NeedFollowUp!='5' && form.NeedFollowUp!='6' ||
              dialogTitle =='修改基本事项'"
                         v-model="form.FollowUpType"
                         placeholder="请选择">
                <el-option label="面对面" value="1"></el-option>
                <el-option label="电话" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="填写问卷" :label-width="formLabelWidth" prop="NeedQuestionnaire"
                          v-if="form.NeedFollowUp=='1' || form.NeedFollowUp=='5' || form.NeedFollowUp=='6'">
              <el-select v-model="form.NeedQuestionnaire" placeholder="请选择是否填写问卷" :disabled="form.NeedFollowUp!='1'
               && form.NeedFollowUp!='5' && form.NeedFollowUp!='6'">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="填写问卷" :label-width="formLabelWidth" v-else>
              <el-select v-model="form.NeedQuestionnaire" placeholder="请选择是否填写问卷" :disabled="form.NeedFollowUp!='1'
               && form.NeedFollowUp!='5' && form.NeedFollowUp!='6'">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="字体加粗" :label-width="formLabelWidth">
              <el-select v-model="form.IsFontWeight" placeholder="请选择是否字体加粗">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="颜色标签" :label-width="formLabelWidth">
              <el-radio-group v-model="form.Color">
                <el-radio label="#000000" class="zd-radio--color color-default"></el-radio>
                <el-radio label="#FF0000" class="zd-radio--color color-red"></el-radio>
                <el-radio label="#FF9900" class="zd-radio--color color-zhong"></el-radio>
                <el-radio label="#FFFF00" class="zd-radio--color color-yellow"></el-radio>
                <el-radio label="#009900" class="zd-radio--color color-green"></el-radio>
                <el-radio label="#33FFFF" class="zd-radio--color color-blue"></el-radio>
                <el-radio label="#333399" class="zd-radio--color color-deepblue"></el-radio>
                <el-radio label="#FF0099" class="zd-radio--color color-pink"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="具体描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.Description"></el-input>
            </el-form-item>
            <el-form-item label="模板事项" :label-width="formLabelWidth">
               <el-select v-model="form.IsTemplate" placeholder="请选择模板事项">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
                
              </el-select>
              <p style="color: #999">模板事项仅可被系统管理员、项目经理添加在日程待办中</p>
            </el-form-item>
            <el-form-item label="关联次日事项" :label-width="formLabelWidth" v-show="false">
              <el-select v-model="form.BacklogId" :disabled="true" laceholder="请选择关联次日事项">
                <el-option v-for="(op,index) in tableData" :key="index" :label="op.Title" :value="op.SYS_ID"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveHandler('healthyForm')">保 存</el-button>
          </span>
        </el-dialog>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import YqTemp from "./yqTemp";
export default {
  data() {
    return {
      searchData: {
        keyWord:'',
        type:''
      },
      activeName: localStorage.scheduleTempActive || "basic",
      centerDialogVisible: false,
      formLabelWidth: "120px",
      total: null,
      pageSize: 10,
      pageCount: 1,
      loading: false,
      tableData: [],
      dialogTitle: "添加基本事项",
      form: {
        Title:'',
        NeedFollowUp:'',
        FollowUpType:'',
        NeedQuestionnaire:'',
        ColorL:'',
        Description:'',
        BacklogId:'',
        IsTemplate:'1'
      },
      formRules: {
         Title:[
            { required: true,message: '必填项',trigger: 'blur'}
        ],
        NeedFollowUp:[
            { required: true,message: '必填项',trigger: 'change'}
        ],
        
      },
      maxHeight: ""
    };
  },
  components: {
    YqTemp
  },
  computed: {},
  watch: {
    activeName(value) {
      localStorage.scheduleTempActive = value;
    }
  },
  created() {},
  beforeMount: function() {
    let that = this;
    let appHeight = $(window).height();
    let autoheight = appHeight - 280 + "px";
    that.maxHeight = autoheight;
  },
  methods: {
    TFformater(row, column, cellValue, index) {
      return cellValue == 1 ? "是" : "否";
    },
    IsTemplateformater(row, column, cellValue, index){
      return cellValue == 1 ? "是" : "否";
    },
    FollowUpTypeFormater(row, column, cellValue, index) {
      return (row.NeedFollowUp==1 || row.NeedFollowUp==5)?(cellValue ? (cellValue == 1 ? "面对面" : "电话") : "-"):'-';
    },
    Fllowformater:function(row, column, cellValue, index){
        switch(cellValue){
          case '1':
                return '健康访谈';
          case '2':
                return '营养门诊';
          case '3':
                return '健康教育';
	      case '5':
		        return '母乳喂养随访';
	      case '6':
		        return '数据采集';
	      case '7':
		        return '肥胖门诊';
          default:
                return '其它事项'
        }
    },
    addHandler() {
      this.form = {
        Title:'',
        NeedFollowUp:'',
        FollowUpType:'',
        NeedQuestionnaire:'',
        ColorL:'',
        Description:'',
        BacklogId:'',
        IsTemplate:'1'
      };
      this.$nextTick( ()=> {
         this.dialogTitle = "添加基本事项";
          this.centerDialogVisible = true;
          this.$refs['healthyForm'].resetFields();
          
      })
     
      
    },
    editHandler(index, row) {
	    this.centerDialogVisible = true;
      if (row) {
        this.dialogTitle = "修改基本事项";
        this.$nextTick(()=>{
	        this.form = JSON.parse(JSON.stringify(row));
          this.$refs['healthyForm'].resetFields();
        })

      }

    },
    deleteHandler(index, row) {
      this.$confirm("是否删除本事项？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let that = this;
          that
            .service({
              url: "Dic/DeleteBacklog?sysId=" + row.SYS_ID,
              method: "post"
            })
            .then(resp => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });

              that.getList();
              // that.tableData.push(that.form);
            })
            .catch(data => {
              that.loading = false;
            });
        })
        .catch(() => {});
    },
    changeNeed(val){
      if(val == '7'){
        this.form.IsTemplate = '0'
      }
    },
    handleSizeChange(val) {
      //条数改变
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //页数改变
      this.pageCount = val;
      this.getList();
    },
    queryHandler() {
      this.pageCount = 1;
      this.getList();
    },
    getList() {
      let that = this;
      this.loading = true;
	  that.total=null
      that
        .service({
          url: "Dic/GetBacklog",
          method: "get",
          params: {
            pageCount: that.pageCount - 1,
            pageSize: that.pageSize,
            ...that.searchData,
            blackLogTitle: that.searchData.keyWord,
            roleGroup:'1'
          }
        })
        .then(response => {
          that.tableData = response.dtData.concat();
          that.data1 = response.dtData.concat();
          that.data2 = response.dtData.concat();
          that.total = parseInt(response.dtData[0].TotalCount);
          that.loading = false;
        })
        .catch(data => {
          that.loading = false;
        });
    },
    saveHandler(formName) {
      // this.tableData.push(this.form);NeedQuestionnaire:FollowUpType[

      let that = this;
      if (!this.form.BacklogId) {
        this.form.BacklogId = "";
      }
      if((this.form.NeedFollowUp=='1' || this.form.NeedFollowUp=='5') && (this.form.NeedQuestionnaire==''||this.form.FollowUpType=='')){
          that.$message({
            type: "info",
            message: "请填写问卷和访谈类型!"
          });
          return false
      }
      
       that.$refs[formName].validate((valid) =>{
          if (valid) {
           that
        .service({
          url: "Dic/SaveBacklog",
          method: "post",
          data: {
            ...that.form
          }
        })
        .then(resp => {
          that.$message({
            type: "success",
            message: "修改成功!"
          });
          this.centerDialogVisible = false;
          that.getList();
          // that.tableData.push(that.form);
        })
        .catch(data => {
          that.getList();
          that.loading = false;
          this.centerDialogVisible = false;
        });
      }
      else {

        return false
      }
       })
      
     
    }
  },
  mounted() {
    if (!localStorage.scheduleTempActive) {
      localStorage.scheduleTempActive = "basic";
    }
    this.getList();
  },
  destroyed() {
    localStorage.removeItem("scheduleTempActive");
  }
};
</script>
<style lang="scss">
.zd-radio--color .el-radio__label {
  font-size: 0;
}

.color-span {
  border-radius: 50%;
  width: 14px;
  position: absolute;
  left: 50%;
  height: 14px;
  transform: translate(-50%, -50%);
}

.color-default .el-radio__input .el-radio__inner {
  border-color: #000000;
}
.color-default .el-radio__input.is-checked .el-radio__inner {
  border-color: #000000;
  background: #000000;
}

.color-red .el-radio__input .el-radio__inner {
  border-color: #ff0000;
}
.color-red .el-radio__input.is-checked .el-radio__inner {
  border-color: #ff0000;
  background: #ff0000;
}

.color-zhong .el-radio__input .el-radio__inner {
  border-color: #ff9900;
}
.color-zhong .el-radio__input.is-checked .el-radio__inner {
  border-color: #ff9900;
  background: #ff9900;
}

.color-yellow .el-radio__input .el-radio__inner {
  border-color: #ffff00;
}
.color-yellow .el-radio__input.is-checked .el-radio__inner {
  border-color: #ffff00;
  background: #ffff00;
}

.color-green .el-radio__input .el-radio__inner {
  border-color: #009900;
}
.color-green .el-radio__input.is-checked .el-radio__inner {
  border-color: #009900;
  background: #009900;
}

.color-blue .el-radio__input .el-radio__inner {
  border-color: #33ffff;
}
.color-blue .el-radio__input.is-checked .el-radio__inner {
  border-color: #33ffff;
  background: #33ffff;
}

.color-deepblue .el-radio__input .el-radio__inner {
  border-color: #333399;
}
.color-deepblue .el-radio__input.is-checked .el-radio__inner {
  border-color: #333399;
  background: #333399;
}

.color-pink .el-radio__input .el-radio__inner {
  border-color: #ff0099;
}
.color-pink .el-radio__input.is-checked .el-radio__inner {
  border-color: #ff0099;
  background: #ff0099;
}

.schedule-list__dialog .el-dialog {
  max-height: 90%;
  margin-top: 5vh !important;
  overflow-y: scroll;
}
</style>
